<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const { mainArea, storeData } = defineProps({
  mainArea: {
    type: String,
    default: '广州'
  },
  storeData: {
    type: Array,
    default: () => [
      { name: '已选门店', value: 23 },
      { name: '活跃会员数', value: '232,300' },
      { name: '平均月销售额', value: '￥222,423' },
      { name: '平均售罄率', value: '45%' },
      { name: '客单价', value: '￥34,544' }
    ]
  }
})

const emit = defineEmits(['import'])

function handleImport() {
  emit('import')
}

const dropdownVisible = ref(false)

function toggleDropdown() {
  dropdownVisible.value = !dropdownVisible.value
}

function onClickOutside(event) {
  const selectEl = document.querySelector('.select')
  if (selectEl && !selectEl.contains(event.target)) {
    dropdownVisible.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', onClickOutside)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', onClickOutside)
})
</script>

<template>
  <div class="store-info-panel">
    <div class="select" @click.stop="toggleDropdown">
      <span>圈选店人货</span>
      <img src="@/assets/select.png" alt="" />
    
    <!-- 下拉框 -->
      <div v-if="dropdownVisible" class="dropdown">
        <div class="dropdown-header">
            <div class="dropdown-header-tittle"><span>营销模式</span></div>
            <div class="dropdown-header-content"><span>店-人-货</span></div>
        </div>
        <div class="dropdown-divider"></div>
        <div class="dropdown-body">
            <div class="dropdown-body-tittle"><span>店-货-人</span></div>
            <div class="dropdown-body-content">
                <div class="dropdown-content-data">
                    <div class="dropdown-data-tittle"><span>人-货</span></div>
                    <div class="dropdown-data-button">
                        <div class="dropdown-button"><img src="@/assets/selected.png" alt=""><span>门店</span></div>
                        <div class="dropdown-button"><img src="@/assets/unselected.png" alt=""><span>商城</span></div>
                    </div>
                </div>
                <div class="dropdown-content-data">
                    <div class="dropdown-data-tittle"><span>货-人</span></div>
                    <div class="dropdown-data-button">
                        <div class="dropdown-button"><img src="@/assets/unselected.png" alt=""><span>门店</span></div>
                        <div class="dropdown-button"><img src="@/assets/unselected.png" alt=""><span>商城</span></div>
                    </div>
                </div>
            </div>
        </div>
      </div>

    </div>

    <div class="store-header">
      <div class="store-header-tittle">
        <img src="@/assets/store.png" alt="" />
        <span class="tittle">店</span>
        <span class="tittle-content">
          -选择门店，确定人货范围，按店开展营销
        </span>
      </div>
      <div class="store-header-address">
        <img src="@/assets/situation.png" alt="" />
        <span>主要区域：{{ mainArea }}</span>
      </div>
    </div>

    <div class="store-body">
      <div class="store-body-left">
        <div
          class="store-data"
          v-for="(item, index) in storeData"
          :key="index"
        >
          <div class="data-name">{{ item.name }}</div>
          <div class="data-value">{{ item.value }}</div>
        </div>
      </div>
      <div class="import-store">
        <el-button plain round @click="handleImport">导入门店</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.select {
  width: 80px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url('@/assets/矩形 13.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right top;
  z-index: 10;
  display: flex;
  align-items: center;
  padding-left: 2px;
  color: rgba(255, 255, 255, 1);
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  span {
    margin-left: 5px;
    margin-right: 5px;
  }
  img {
    width: 12px;
    height: 12px;
  }
}

.dropdown {
    position: absolute;
    top: 35px;
    width: 150px;
    height: 150px;
    background: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    .dropdown-divider{
        height: 1px;
        background-color: rgba(217, 217, 217, 1);
        margin: 4px 0;
        width: 80%;
        margin-left: 10%;
    }
    .dropdown-header {
        flex: 1;
        padding: 8px 12px;
        cursor: pointer;
        color: #333;
        font-size: 12px;
        white-space: nowrap;
        .dropdown-header-tittle{
            justify-content: center;
            display: flex;
        }
        .dropdown-header-content{
            color: rgba(217, 217, 217, 1);
            margin-top: 11px;
            font-size: 10px;
        }
    }
    .dropdown-body {
        flex: 2;
        display: flex;
        flex-direction: column;
        color: rgba(217, 217, 217, 1);
        margin-top: 11px;
        font-size: 10px;
        margin-left: 12px;
        .dropdown-body-tittle{
            flex: 1;
        }
        .dropdown-body-content{
            flex: 2;
            display: flex;
            flex-direction: column;
        }
        .dropdown-content-data{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .dropdown-data-tittle{
                flex: 1;
            }
            .dropdown-data-button{
                flex: 2;
                display: flex;
            }
        }
    }

    .dropdown-header:hover {
      background-color: #f5f7fa;
    }
}

.store-header {
  margin-top: 25px;
  margin-left: 25px;
  height: 30px;
  display: flex;
  align-items: center;
  margin-right: 20px;
  .store-header-tittle { 
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    img {
      width: 20px;
      height: auto;
      margin-left: 10px;
    }
  }
  .store-header-address {
    flex: 1;
    align-items: center;
    justify-content: center;
    img {
      margin-left: 10px;
      width: 15px;
      height: auto;
    }
    span {
      font-size: 15px;
      color: rgba(10, 31, 55, 1);
    }
  }
}

.store-body {
  flex: 1;
  margin-top: 20px;
  margin-left: 35px;
  display: flex;
  
  .store-body-left {
    flex: 10;
    display: flex;
    gap: 10px;
    .store-data {
      flex: 1;
    }
  }
  .import-store {
    flex: 2;
    .el-button:hover {
      color: rgba(252, 151, 73, 1);
      border-block-color: rgba(252, 151, 73, 1);
    }
  }
}

.tittle {
  font-size: 18px;
  margin-left: 8px;
  font-weight: bold;
}

.tittle-content {
  font-size: 14px;
  font-weight: bold;
  color: rgba(10, 31, 55, 1);
  margin-left: 6px;
  background-image: url('@/assets/tittle-content.png');
  background-repeat: repeat-x;
  padding-bottom: 0;
  background-position: left bottom;
}

.data-name {
  font-size: 12px;
  color: rgba(10, 31, 55, 0.6);
}

.data-value { 
  font-size: 20px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: bolder;
  margin-top: 5px;
}
</style>
